import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { fileURLToPath, URL } from 'node:url';
import tailwindcss from '@tailwindcss/postcss';
import autoprefixer from 'autoprefixer';

export default defineConfig({
  // 配置 Vite 插件
  plugins: [
    // 使用 Vue 3 插件
    vue({
      template: {
        compilerOptions: {}
      }
    })
  ],
  // 配置 CSS 相关设置
  css: {
    postcss: {
      // 使用 Tailwind CSS 和 Autoprefixer 插件
      plugins: [
        tailwindcss,
        autoprefixer
      ]
    }
  },
  // 配置模块解析选项
  resolve: {
    // 配置别名，方便引入模块
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  // 配置开发服务器选项
  server: {
    proxy: {
      // 配置代理，将以 /api 开头的请求转发到后端服务器
      '/api': {
        // 后端服务器地址
        target: 'http://localhost:8080',
        // 允许跨域请求
        changeOrigin: true,
        // 重写请求路径，去掉 /api 前缀
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  // 定义全局常量
  define: {
    // 禁用生产环境下水合不匹配的详细信息
    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
    // 启用 Vue 选项式 API
    __VUE_OPTIONS_API__: true,
    // 禁用生产环境下的开发工具
    __VUE_PROD_DEVTOOLS__: false,
    // 定义环境变量
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
  },
  // 配置依赖优化选项
  optimizeDeps: {
    // 预构建依赖项，提高启动速度
    include: ['element-plus']
  }
});